<template>
  <div>
    <p
      v-for="(o, index) in order"
      :key='o.id'
    >
      {{o.goods.title}}--
      {{o.goods.price}}--
      <img
        :src="o.goods.img"
        alt=""
      > --
      <span v-if="o.comment">
        <input
          type="text"
          disabled
          :value="o.comment.content"
        ><button disabled>已评论</button>
      </span>

      <span v-else>
        <input
          type="text"
          placeholder="请输入评论"
          v-model="o.new_comment"
        ><button @click="comment(index)">评论</button>
      </span>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uid: localStorage.uid,
      order: [], // 订单
    }
  },
  created() {
    this.get_order()
  },
  methods: {
    get_order() {
      this.axios.get('http://127.0.0.1:8000/order/', { params: { user: this.uid } }).then(res => {
        // alert(res.data)
        this.order = res.data
      })
    },
    comment(index) {
      this.axios.post('http://127.0.0.1:8000/comment/', {
        user: this.uid,
        order: this.order[index].id,
        content: this.order[index].new_comment
      }).then(res => {
        this.get_order()
      })
    }
  }
}
</script>

<style>
</style>